<template>
  <div class="app-container">
      <!-- <div class="right-detail"> -->
        <div class="cbox">
              <el-form class="form" ref="flt" :rules="rules" label-width="10rem" size="mini">
                <el-row :gutter="15" class="row">
                  
                  <el-col :span="6">
                    <el-form-item label="企业编号：">
                      <el-input   placeholder="请输入id" v-model="from.uuid" style="width: 100%" clearable></el-input>
                    </el-form-item>
                  </el-col>

                    <el-col :span="2">
                      <el-form-item label-width="10px">
                        <el-button @click="searchType" type="primary">查询</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
            </div>
            <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增</el-button>
                  <el-button size="mini" type="primary" plain @click="del('diong')">编辑</el-button>
                  <el-button size="mini" type="danger" plain @click="examine">删除</el-button>
                </el-col>
            </el-row>
            <div class="table" ref="topType">
                  <!-- <div class="btn-area" ref="btnArea">
                    <el-button plain size="mini" type="success" @click="add">新增市</el-button>
                    <el-button plain size="mini" type="primary" @click="del('diong')">编辑市</el-button>
                    <el-button plain size="mini" type="danger" @click="examine">删除市</el-button>
                  </div> -->
                <div class="inner" ref="inner">
                    <el-table
                        :data="DetailedData"
                        border
                        :height="maxHeight"
                        :header-cell-style="{ textAlign: 'center' }"
                        highlight-current-row
                        @row-dblclick='rowdbClickA'
                        @row-click="rowClick">
                        <el-table-column size="mini" type="index" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                        <el-table-column size="mini" prop="fitUUID" show-overflow-tooltip label="企业编号"></el-table-column>
                        <el-table-column size="mini" prop="attCode" show-overflow-tooltip label="订单编号"></el-table-column>
                        <el-table-column size="mini" prop="wabCode" show-overflow-tooltip label="运单编号"></el-table-column>
                        <!-- <el-table-column size="mini" prop="ctyeEgsname" show-overflow-tooltip label="英文名称"></el-table-column> -->
                        <!-- <el-table-column size="mini" prop="ctyeShrcode" show-overflow-tooltip label="简称代码"></el-table-column> -->
                        <!-- <el-table-column size="mini" prop="ctyeShrchn" show-overflow-tooltip label="简称中文"></el-table-column> -->
                        <!-- <el-table-column size="mini" prop="ctyePrename" show-overflow-tooltip label="首字母"></el-table-column>                        -->
                        <el-table-column size="mini" prop="complaint" show-overflow-tooltip label="投诉人"></el-table-column>
                        <el-table-column size="mini" prop="complaintContents" show-overflow-tooltip label="投诉内容"></el-table-column>
                        <el-table-column size="mini" prop="complaintTime" show-overflow-tooltip label="投诉时间"></el-table-column>
                         <!-- <el-table-column
            align="left"
            label="是否有效"
            prop="iscomplaint"
            show-overflow-tooltip
          >
             <template slot-scope="scope">
                   <div style="text-align: center;" v-if="scope.row.ctyeIsvalid == 'Y'">
                        <el-checkbox v-model="item.item" disabled></el-checkbox>
                   </div>
                    <div style="text-align: center;" v-if="scope.row.ctyeIsvalid == 'N'">
                       <el-checkbox v-model="item.itemA" disabled></el-checkbox>
                 </div>
              </template>
          </el-table-column> -->
                    </el-table>
                </div>
          </div>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          small
          background
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total"
        ></el-pagination>

        <!-- 弹出框 新增 编辑 -->
          <el-dialog
            v-el-drag-dialog
            width="40%"
            :title='addText'
            :visible.sync="addShowA"
            v-if="addShowA"
            :close-on-click-modal="false">
                <el-form  label-width="10rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                    <el-row>
                        <el-col :span="12">
                          <el-form-item label="省名称：" prop="ctyeCityId">
                              <el-select  clearable v-model="xzData.ctyeCityId" :disabled='disabled' >
                                <el-option
                                  v-for=" item in listDataA"
                                  :key="item.PRV_CODE"
                                  :value="item.PRV_CODE"
                                  :label="item.PRV_CHNNAME"
                                ></el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item prop="ctyeCode" label="市代码：">
                            <el-input maxlength="6" :disabled='disabledA' @change="uppercase('ctyeCode')"   v-model="xzData.ctyeCode" clearable></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                          <el-form-item prop="ctyeChnname" label="中文名称：">
                            <el-input maxlength="32" :disabled='disabled'  v-model="xzData.ctyeChnname" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item prop="ctyeEgsname" label="英文名称：">
                            <el-input maxlength="32" :disabled='disabled'  v-model="xzData.ctyeEgsname" clearable></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                          <el-form-item prop="ctyeShrcode" label="简称代码：">
                            <el-input maxlength="10" :disabled='disabled'  v-model="xzData.ctyeShrcode" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item prop="ctyeShrchn" label="简称中文：">
                            <el-input maxlength="28" :disabled='disabled'  v-model="xzData.ctyeShrchn" clearable></el-input>
                          </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                          <el-form-item prop="ctyePrename" label="首字母：">
                            <el-input maxlength="1" :disabled='disabled'  @change="uppercase('ctyePrename')"  v-model="xzData.ctyePrename" clearable></el-input>
                          </el-form-item>
                        </el-col>
                         <el-col :span="12">
                            <el-form-item  label="是否有效："  prop="ctyeIsvalid" >
                              <el-radio-group :disabled="messageDisabled"  v-model="xzData.ctyeIsvalid" >
                                <el-radio label="Y" :disabled='disabled' >是</el-radio>
                                <el-radio label="N" :disabled='disabled'>否</el-radio>
                              </el-radio-group>
                              <!-- <el-select v-model.trim="dialogForm.CTY_ISVALID">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :title="item.label" :value="item.value">
                                            </el-option>
                              </el-select>-->
                            </el-form-item>
                          </el-col>
                    </el-row>

        
                    <el-row>
                      <el-col :span="24">
                          <el-form-item prop="ctyeRemark" label="备注：">
                            <el-input maxlength="32" :disabled='disabled' type="textarea" v-model="xzData.ctyeRemark" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        
                    </el-row>
                        
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size='mini' type="primary" v-if="see" @click="saveEditor('xzData')">保存</el-button>
                    <el-button size='mini'  @click="close">关闭</el-button>
                </div>
          </el-dialog>
  </div>
</template>

<script>
import {
  ComplaintList
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination' 
export default {
  name: 'router.biddingArbitration',
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        // customerName:'', //省中文名称
        uuid:'', //企业编号
        attCode:'', //订单编号
        wabCode:'', //运单编号
        iscomplaint:'', //投诉状态
        contents:'', //投诉内容
        complaint:'', //投诉人
        complaintTime:'',//投诉时间
      },
      item:{
        item:true,
        itemA:false
      },
      options: [
        {
          value: 'Y',
          label: '激活'
        },
        {
          value: 'N',
          label: '未激活'
        }
      ],
      maxHeight:-1,
      disabled:false,
      disabledA:false,
      listData:[],
      listDataA:[],
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      see:true, //保存按钮
      DetailedData:[], //主列表的数据
      xzData:{},// 传给新增 编辑弹出框的数据
      PageIndexs:'',
      PageSizes:'',
      itemData:[], //当前行数据
      shiList:[], // 下拉框
      //  dialogForm: {
      //   ctyCd: '',
      //   ctyCname: '',
      //   ctyeIsvalid: 'Y',
      //   ctyEname: '',
      //   ctyRemark: ''
      // },
      //表单验证 新增 编辑
      addRules:{
        ctyeShrchn:[
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文汉字',
            trigger: 'change'
          }
        ],

        ctyeCityId:[
          { required: true, message: '请选择省名称', trigger:'change'}
        ],
        ctyeCode:[
          { required: true, message: '请填写市代码', trigger:'blur'}
        ],
        ctyeChnname:[
          { required: true, message: '请填写中文名称', trigger:'blur'},
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '请输入中文汉字',
            trigger: 'change'
          }
        ],
        ctyeIsvalid: [
          {
            required: true,
            message:'有效标志不能为空',
            trigger: 'blur'
          }
        ],
        ctyeEgsname:[
          { required: true, message: '请填写英文名称', trigger:'blur'},
          {
            pattern: /^[a-zA-Z ]+$/,
            message: '请输入英文',
            trigger: 'blur'
          }
        ],
        ctyePrename:[
          { required: true, message: '请填写首字母', trigger:'blur'},
          {
            pattern: /^[a-zA-Z ]+$/,
            message: '请输入首字母',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
    this.shengData()
  },
  methods:{
    // 切换大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    resetDialogForm() {
      return (this.dialogForm = {
        ctyeCityId: '',
        ctyeCode: '',
        ctyeChnname: '',
        ctyeEgsname:'',
        ctyeShrcode:'',
        ctyeShrchn:'',
        ctyeRemark:'',
        ctyeIsvalid: 'Y',
        ctyePrename:''
      })
    },
    //省下拉框
    shengData(){
      shengCityManagementXL().then(res=>{
        this.listDataA= res.data
      })
    },

    // 列表数据
    getList(currentPage, pageSize, updateTotal) {
      ComplaintList({
        // fitUUID:this.from.uuid,
        // attCode:this.from.attCode,
        // wabCode:this.from.wabCode,
        // iscomplaint:this.from.iscomplaint,
        // complaintContents:this.from.contents,
        // complaint:this.from.complaint,
        // complaintTime:this.from.complaintTime,
      //   ctyeChnname:this.from.name,
      //   ctyeCityId:this.from.customerName,
        PageIndexs: this.Pagination.currentPage.toString(),
        PageSizes: this.Pagination.pageSize.toString()
      }).then(res => {
        this.DetailedData = res.data
        updateTotal(Number(res.total))
      })
    },
    // 点击搜索
    searchType(){
      this.refreshList()
    },
    //新增
    add(){
      this.addText='新增市信息'
      this.diong=''
      this.addShowA=true
      this.disabled= false
      this.disabledA = false
      this.xzData = {
        ctyeCityId:'',
        ctyeCode:'',
        ctyeChnname:'',
        ctyeEgsname:'',
        ctyeShrcode:'',
        ctyeShrchn:'',
        ctyeRemark:'',
        ctyeIsvalid:'Y',
        ctyePrename:''
      }
    },
    //编辑
    del(){
      if(Object.keys(this.itemData).length){
        this.xzData = this.itemData
        this.addText='编辑'
        this.diong='E'
        this.addShowA=true
        this.see = true
        this.disabled= false
        this.disabledA= true
      }else{
        this.$alert('请选择需要编辑的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
    },
    //删除
    examine(){
      if(Object.keys(this.itemData).length){
        this.$confirm('您确认要删除此数据吗?', '提示', {
          closeOnClickModal: false,
          
        }).then(() => {
          delcityManagement({ctyeCode:this.itemData.ctyeCode}).then(res=>{
            if(res.success !== '1'){
              this.$message ({
                type: 'success',
                message: '删除失败'
              })
              return
            }else{
              this.$message ({
                type: 'success',
                message: '删除成功'
              })
              this.refreshList()
              this.close()
            }
          })
        })
      }else{
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }

    },
    //双击查看
    rowdbClickA(row){
      this.addText='查看市信息'
      this.addShowA=true
      this.see=false
      this.xzData=row
      this.disabled= true
      this.disabledA= true
    },
    //新增 编辑  点击保存
    saveEditor(xzData){
      this.$refs[xzData].validate((valid) => {
        if (valid) {
          if (this.diong ==='E') {
            editcityManagement(this.xzData).then(res=>{
              if(res.success !=='1'){
                this.$message ({
                  type: 'success',
                  message: '编辑失败'
                })
              }else{
                // this.xzData = []
                this.$message ({
                  type: 'success',
                  message: '编辑成功'
                })
                this.close()
                this.refreshList()
              }
            })
          }else{
            addcityManagement(this.xzData).then(res=>{
              if(res.success !== '1'){
                this.$message ({
                  type: 'success',
                  message: '添加失败'
                })
              }else{
                this.$message ({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                this.refreshList()
                this.$refs[xzData].resetFields()
              }
            })

          }
        } else {
          return false
        }
      })
    },
    // 关闭弹出框
    close(){
      this.addShowA=false
    },
    //当前行数据
    rowClick(row){
      this.itemData = row
    }
  }
}
</script>

<style  lang="scss" scoped>
.el-select {
  width: 100%;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
